<template>
  <el-container>
    <el-header>
      <el-row :gutter="20">
        <el-col :span="5">
          <!-- <div class="grid-content bg-purple"> -->
            <el-select v-model="value" placeholder="请选择标准" @change="option">
              <el-option v-for="item in standard" :key="item.value" :label="item.label" :value="item.value">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
              </el-option>
            </el-select>
          <!-- </div> -->
        </el-col>
        <el-col :span="5">
          <!-- <div class="grid-content bg-purple"> -->
            <!-- Form -->
            <el-button type="primary" @click="showForm()">查看标准</el-button>
            <!-- <el-button type="warning" @click=" updatetitle()">修改标准</el-button>
            <el-button type="danger" @click="delFormVisible = true">删除标准</el-button> -->
          <!-- </div> -->
        </el-col>
            <el-col :span="5">
             <!-- <div class="grid-content bg-purple"> -->
             <el-select v-model="value1" placeholder="请选择时间段" @change="option1">
              <el-option v-for="item in standard1" :key="item.value" :label="item.label" :value="item.value">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
              </el-option>
            </el-select>
            <!-- </div> -->
            <!-- </div> -->
         </el-col>
         <el-col :span="4">
            <el-button type="danger" @click="forecast()">预测</el-button> 
            </el-col>
         
      </el-row> 
      <!--添加标准  -->
            <el-dialog :title="this.title" :visible.sync="showFormVisible" @close="showFormVisible=false" :modal-append-to-body="false">
                <el-form ref="form1" :model="form1" label-width="120px" >
                   <el-form-item label="修改数据标准" prop="delivery">
                  <el-switch v-model="form1.delivery"></el-switch>
                  </el-form-item>
                  <el-form-item label="土壤温度/℃" >
                    <el-input v-model="form1.sdSoilTemperature" :readonly='!form1.delivery'></el-input>
                  </el-form-item>
                  <el-form-item label="土壤湿度/%">
                    <el-input v-model="form1.sdSoilMoisture" :readonly='!form1.delivery'></el-input>
                  </el-form-item>
                  <el-form-item label="电导率/ms/cm">
                    <el-input v-model="form1.sdConductivity" :readonly='!form1.delivery'></el-input>
                  </el-form-item>
                  <el-form-item label="土壤PH">
                    <el-input v-model="form1.sdSoilPh" :readonly='!form1.delivery'></el-input>
                  </el-form-item>
                  <el-form-item label="风向/°">
                    <el-input v-model="form1.sdWindDirection" :readonly='!form1.delivery'></el-input>
                  </el-form-item>
                  <el-form-item label="风速">
                    <el-input v-model="form1.sdWindSpeed" :readonly='!form1.delivery'></el-input>
                  </el-form-item>
                  <el-form-item label="大气温度/℃">
                    <el-input v-model="form1.sdAtmosphericTemperature" :readonly='!form1.delivery'></el-input>
                  </el-form-item>
                  <!-- <el-col> -->
                    <el-form-item label="大气湿度/%">
                      <el-input v-model="form1.sdAtmosphericHumidity" :readonly='!form1.delivery'></el-input>
                    </el-form-item>
                    <el-form-item label="降雨量/mm">
                      <el-input v-model="form1.sdRainfall" :readonly='!form1.delivery'></el-input>
                    </el-form-item>
                    <el-form-item label="大气压/KPa">
                      <el-input v-model="form1.sdAtmosphericPressure" :readonly='!form1.delivery'></el-input>
                    </el-form-item>
                    <el-form-item label="PM2.5/ug/m³">
                      <el-input v-model="form1.sdPm2" :readonly='!form1.delivery'></el-input>
                    </el-form-item>
                    <el-form-item label="PM10/ug/m³">
                      <el-input v-model="form1.sdPm10" :readonly='!form1.delivery'></el-input>
                    </el-form-item>
                    <el-form-item label="蒸发量/mm">
                      <el-input v-model="form1.sdEvaporationCapacity" :readonly='!form1.delivery'></el-input>
                    </el-form-item>
                  <!-- </el-col> -->
                </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="showFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateSt()">修改</el-button>
              </div>
            </el-dialog>
            <!--  修改标准-->
            <!-- <el-dialog :title= "this.title" :visible.sync="updateFormVisible">
              <el-form :model="form1">
                <el-form ref="form1" :model="form1" label-width="80px">
                  <el-form-item label="土壤温度">
                    <el-input v-model="form1.temperature"></el-input>
                  </el-form-item>
                  <el-form-item label="土壤湿度">
                    <el-input v-model="form1.moisture"></el-input>
                  </el-form-item>
                  <el-form-item label="电导率/盐分">
                    <el-input v-model="form1.salt"></el-input>
                  </el-form-item>
                  <el-form-item label="土壤PH">
                    <el-input v-model="form1.PH"></el-input>
                  </el-form-item>
                  <el-form-item label="风向">
                    <el-input v-model="form1.direction"></el-input>
                  </el-form-item>
                  <el-form-item label="风速">
                    <el-input v-model="form1.speed"></el-input>
                  </el-form-item>
                  <el-form-item label="大气温度">
                    <el-input v-model="form1.airtemperature"></el-input>
                  </el-form-item>
                  <el-col>
                    <el-form-item label="大气湿度">
                      <el-input v-model="form1.arimoisture"></el-input>
                    </el-form-item>
                    <el-form-item label="降雨量">
                      <el-input v-model="form1.rainfall"></el-input>
                    </el-form-item>
                    <el-form-item label="PM2.5">
                      <el-input v-model="form1.PM2"></el-input>
                    </el-form-item>
                    <el-form-item label="PM10">
                      <el-input v-model="form1.PM10"></el-input>
                    </el-form-item>
                    <el-form-item label="蒸发量">
                      <el-input v-model="form1.capicity"></el-input>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="updateFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateSt()">确 定</el-button>
              </div>
            </el-dialog> -->
            <!--  -->
    </el-header>
    <!-- <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <div class="timeSet">
            <el-date-picker v-model="value2" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row> -->
    <el-row :gutter="20">
      <!-- <el-header> -->
        <el-main>
          <el-table :data="tableData"  border height="550" width="100%"   :row-class-name="tableRowClassName">
            <el-table-column :prop="this.column1" label="" width="280">
            </el-table-column>
            <el-table-column :prop="this.column2" :label="this.title" width="280">
              
            </el-table-column>
            <el-table-column :prop="this.column3" label="预测数据" width="280">
            </el-table-column> 
            <!-- <el-table-column prop="sdSoilTemperature" label="土壤温度" width="80"></el-table-column>
            <el-table-column prop="sdSoilMoisture" label="土壤湿度/%" width="80"></el-table-column>
            <el-table-column prop="sdConductivity" label="3" width="80"></el-table-column>
            <el-table-column prop="sdSoilPh" label="4" width="80"></el-table-column>
            <el-table-column prop="sdWindSpeed" label="5" width="80"></el-table-column>
            <el-table-column prop="sdWindDirection" label="6" width="80"></el-table-column>
            <el-table-column prop="sdAtmosphericTemperature" label="7" width="80"></el-table-column>
            <el-table-column prop="sdAtmosphericHumidity" label="8" width="80"></el-table-column>
            <el-table-column prop="sdRainfall" label="9" width="80"></el-table-column>
            <el-table-column prop="sdAtmosphericPressure" label="10" width="80"></el-table-column>
            <el-table-column prop="sdPm2" label="11" width="80"></el-table-column>
            <el-table-column prop="sdPm10" label="PM10/ug/m³" width="80"></el-table-column>
            <el-table-column prop="sdEvaporationCapacity" label="13" width="80"></el-table-column> -->

          </el-table>
        </el-main>
      <!-- </el-header> -->
    </el-row>
<!--    <el-footer>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="currentPage3" :page-size="100" layout="prev, pager, next, jumper" :total="1000">
        </el-pagination>
      </div>
    </el-footer> -->
  </el-container>
</template>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
<script>
  import axios from 'axios'
import { dataTool, parseGeoJSON } from 'echarts';
  // import $ from jquery
  export default {
      methods: {
      // 分页
      // handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      // },
      // handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      // },
       // 切换标准，已与datatable绑定
      option(val) {
            var obj = {}
           obj = this.standard.find(function(item) {
              return item.value === val;
            })
            this.title = obj.label;
            this.standardID =obj.value
        },
        option1(val) {
            // console.log('error');
            var obj = {}
           obj = this.standard1.find(function(item) {
              return item.value === val;
            })
            this.value2 =obj.value
        },
      // 标准数据展示
      showForm() {
        if(this.standardID == ''){
          this.$message({
            message:"请先选择标准",
            type:'warning'
          })
          return;
        }
        axios.post(`/api/standarMonit/queryOne?id=${this.standardID}`)
          .then(({data}) => {
            if (data.code == 6666) {
              this.$message({
                message: data.message,
                type: 'success'
              })
              this.showFormVisible=true;
              this.form1=data.data
              // this.form.sdSoilTemperature=data.data.sdSoilTemperature;
              // this.sdSoilMoisture=data.data.sdSoilMoisture;
              // this.sdConductivity=data.data.sdConductivity;
              // this.sdSoilPh=data.data.sdSoilPh;
              // this.sdWindSpeed=data.data.sdWindSpeed;
              // this.sdWindDirection=data.data.sdWindDirection;
              // this.sdAtmosphericTemperature=data.data.sdAtmosphericTemperature;
              // this.sdAtmosphericHumidity=data.data.sdAtmosphericHumidity;
              // this.sdRainfall=data.data.sdRainfall;
              // this.sdAtmosphericPressure=data.data.sdAtmosphericPressure;
              // this.sdPm2=data.data.sdPm2;
              // this.sdPm10=data.data.sdPm10;
              // this.sdEvaporationCapacity=data.data.sdEvaporationCapacity;
              // this.sdMinute=data.data.sdMinute;
            } else {
              this.$message({
                message: data.message,
                type: 'error'
              })
            }
          })
          .catch((e) => {
            console.log(e)
          })
        this.showFormVisible = true
      },
      // 修改AA
      updateSt() {
        this.form1.sdId=this.standardID
        axios.post('/api/standarMonit/updateStandar', this.form1)
          .then(({
            data
          }) => {
            if (data.code == 6666) {
              this.$message({
                message: data.message,
                type: 'success'
              })
              this.getProductList()
            } else {
              this.$message({
                message: data.message,
                type: 'error'
              })
            }
          })
          .catch((e) => {
            console.log(e)
          })
        this.showFormVisible = false
      },
      // 模拟kung
      forecast() {
        if(this.standardID == ''){
          this.$message({
            message:"请先选择标准",
            type:'warning'
          })
          return;
        }
        if(this.value2 == ''){
          this.$message({
            message:"请先选择时间",
            type:'warning'
          })
          return;
        }
        axios.post(`/api/standarMonit/queryOneData?date=${this.value2}&standar=${this.standardID}`)
          .then(({data}) => {
            if (data.code == 6666) {
              this.$message({
                message: data.message,
                type: 'success'
              })
              this.rowList = new Array()
              data.compare.forEach(val =>{
                this.rowList.push(val)
              })
              // this.tableData = data.entity
              // console.log(data.realData)
              // console.log(data.sdData)
              console.log(this.tableData)
              this.sdData[0]="土壤温度/℃";
              this.sdData[1]=(data.sdData.sdSoilTemperature);
              this.sdData[2]=(data.realData.mtSoilTemperature);
              this.allData.push(this.sdData)
              this.sdData = new Array()
              this.sdData[0]="土壤湿度/%";
              this.sdData[1]=(data.sdData.sdSoilMoisture);
              this.sdData[2]=(data.realData.mtSoilMoisture);
              this.allData.push(this.sdData)
              this.sdData = new Array()
              this.sdData[0]="电导率/ms/cm";
              this.sdData[1]=(data.sdData.sdConductivity);
              this.sdData[2]=(data.realData.mtConductivity);
              this.allData.push(this.sdData)
              this.sdData = new Array()
              this.sdData[0]="土壤PH";
              this.sdData[1]=(data.sdData.sdSoilPh);
              this.sdData[2]=(data.realData.mtSoilPh);
              this.allData.push(this.sdData)
              this.sdData = new Array()
              this.sdData[0]="风向";
              this.sdData[1]=(data.sdData.sdWindDirection);
              this.sdData[2]=(data.realData.mtWindDirection);
              this.allData.push(this.sdData)
              this.sdData = new Array()
              this.sdData[0]="风速";
              this.sdData[1]=(data.sdData.sdWindSpeed);
              this.sdData[2]=(data.realData.mtWindSpeed);
              this.allData.push(this.sdData)
              this.sdData = new Array()
              this.sdData[0]="大气温度/℃";
              this.sdData[1]=(data.sdData.sdAtmosphericTemperature);
              this.sdData[2]=(data.realData.mtAtmosphericTemperature);
              this.allData.push(this.sdData)
              this.sdData = new Array()
              this.sdData[0]="大气湿度/%";
              this.sdData[1]=(data.sdData.sdAtmosphericHumidity);
              this.sdData[2]=(data.realData.mtAtmosphericHumidity);
              this.allData.push(this.sdData)
              this.sdData = new Array()
              this.sdData[0]="降雨量";
              this.sdData[1]=(data.sdData.sdRainfall);
              this.sdData[2]=(data.realData.mtRainfall);
              this.allData.push(this.sdData)
              this.sdData = new Array()
              this.sdData[0]="大气压力";
              this.sdData[1]=(data.sdData.sdAtmosphericPressure);
              this.sdData[2]=(data.realData.mtAtmosphericPressure);
              this.allData.push(this.sdData)
              this.sdData = new Array()
              this.sdData[0]="PM2.5/ug/m³";
              this.sdData[1]=(data.sdData.sdPm2);
              this.sdData[2]=(data.realData.mtPm2);
              this.allData.push(this.sdData)
              this.sdData = new Array()
              this.sdData[0]="PM10/ug/m³";
              this.sdData[1]=(data.sdData.sdPm10);
              this.sdData[2]=(data.realData.mtPm10);
              this.allData.push(this.sdData)
              this.sdData = new Array()
              this.sdData[0]="蒸发量/mm";
              this.sdData[1]=(data.sdData.sdEvaporationCapacity);
              this.sdData[2]=(data.realData.mtEvaporationCapacity);
              this.allData.push(this.sdData)
              this.sdData = new Array()
              // this.sdData.push('standardData:'+data.sdData.sdSoilMoisture);
              // this.sdData.push('standardData:'+data.sdData.sdConductivity);
              // this.sdData.push('standardData:'+data.sdData.sdSoilPh);
              // this.sdData.push('standardData:'+data.sdData.sdWindSpeed);
              // this.sdData.push('standardData:'+data.sdData.sdWindDirection);
              // this.sdData.push('standardData:'+data.sdData.sdAtmosphericTemperature);
              // this.sdData.push('standardData:'+data.sdData.sdAtmosphericHumidity);
              // this.sdData.push('standardData:'+data.sdData.sdRainfall);
              // this.sdData.push('standardData:'+data.sdData.sdAtmosphericPressure);
              // this.sdData.push('standardData:'+data.sdData.sdPm2);
              // this.sdData.push('standardData:'+data.sdData.sdPm10);
              // this.sdData.push('standardData:'+data.sdData.sdEvaporationCapacity);
              // this.sdData.push('standardData:'+data.sdData.sdMinute);
              this.tableData = this.allData
              if(this.allData.length>=13){
                this.allData = new Array()
              }
            } else {
              this.$message({
                message: data.message,
                type: 'error'
              })
            }
          })
          .catch((e) => {
            console.log(e)
          })
        this.delFormVisible = false
      },
     tableRowClassName({row, rowIndex}) {
        if(this.rowList[rowIndex]>0)
        return 'warning-row'
        return '';
      }
        
      },
      //表格数据
      // created() {
      //   //发送请求
      //   // axios.get('')
      //   // .then(res=>{
      //   //   window.console.log(res.data)
      //   //   this.tableData=res.data
      //   // })
      //   // .catch((e) => {
      //   //     console.log("error")
      //   // })
      //   // console.log(this.item.value);
      // },

    

    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        readonly: 'this.form1.delivery',
        sdData:[],
        allData:[],
        rowList:[],
        // realData:[],
        //input选择器
        standard: [{
            value: '1',
            label: '标准1',
          }, {
            value: '2',
            label: '标准2'
          },
          {
            value: '3',
            label: '标准3'
          }
        ],
        standard1: [{
            value: '1',
            label: '未来一天',
          }, {
            value: '3',
            label: '未来三天'
          },
          {
            value: '7',
            label: '未来一周'
          },
          {
            value: '15',
            label: '未来半个月'
          }
        ],
        value: '',
        column1:'0',
        column2:'1',
        column3:'2',
        tableData:[{
          0:'暂无数据',
          1:'暂无数据',
          2:'暂无数据'
        }],
        //表格数据
        // tableData: [
        //   // {
        //   //  sdSoilTemperature:'',
        //   //   sdSoilMoisture:'',
        //   //   sdConductivity:'',
        //   //   sdSoilPh:'',
        //   //  sdWindSpeed:'',
        //   //   sdWindDirection:'',
        //   //   sdAtmosphericTemperature:'',
        //   //   sdAtmosphericHumidity:'',
        //   //    sdRainfall:'',
        //   //    sdAtmosphericPressure:'',
        //   //     sdPm2:'',
        //   //    sdPm10:'',
        //   //    sdEvaporationCapacity:'',

        //   // }

        //           // {
        //           //   date: '2',
        //           //   standardData: '王小虎',
        //           //   realData: '上海市普陀区金沙江路 1518 弄'
        //           // }, {
        //           //   date: '2016-05-04',
        //           //   standardData: '王小虎',
        //           //   realData: '上海市普陀区金沙江路 1517 弄'
        //           // },
        //           {
        //             date:'土壤温度/℃',
        //             standardData:'',
        //             realData:''
        //           },
        //           {
        //             date: '土壤湿度/%',
        //             standardData:'',
        //             realData:''
        //           },
        //           {
        //             date: '电导率/ms/cm',
        //             standardData:'',
        //             realData:''
        //           },
        //           {
        //             date: '土壤PH',
        //             standardData:'',
        //             realData:''
        //           },
        //           {
        //             date:'风向',
        //             standardData:'',
        //             realData:''
        //           },
        //           {
        //             date:'风速',
        //             standardData:'',
        //             realData:''
        //           },
        //           {
        //             date:'大气温度/℃',
        //             standardData:'',
        //             realData:''
        //           },
        //           {
        //             date:'降雨量',
        //             standardData:'',
        //             realData:''
        //           },
        //           {
        //             date: '大气压力',
        //             standardData:'',
        //             realData:''
        //           },
        //           {
        //             date: 'PM2.5/ug/m³',
        //             standardData:'',
        //             realData:''
        //           },
        //           {
        //             date:'PM10/m³',
        //             standardData:'',
        //             realData:''
        //           },
        //           {
        //             date: '蒸发量',
        //             standardData:'',
        //             realData:''
        //           },
        //           {
        //             date:'时间',
        //             standardData:'',
        //             realData:''
        //           },

        // ],
        value1: '',
        value2: '',
        value3: '',
        //修改标准弹出框
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          type: [],
          resource: '',
          desc: '',

        },
        form1: {
          sdSoilTemperature:'',
          sdSoilMoisture:'',
          sdConductivity:'',
          sdSoilPh:'',
          sdWindSpeed:'',
          sdWindDirection:'',
          sdAtmosphericTemperature:'',
          sdAtmosphericHumidity:'',
          sdRainfall:'',
          sdAtmosphericPressure:'',
          sdPm2:'',
          sdPm10:'',
          sdEvaporationCapacity:'',
          sdMinute:'',
          delivery: false,
        },
        formLabelWidth: '120px',
        updateFormVisible: false,
        showFormVisible: false,
        delFormVisible: false,
        title:'',
        standardID:''
        //修改标准弹出框结束
      }
    }
  }
</script>
<style >
.el-table .warning-row {
    background: #ff0000;
  }
  .el-header
    {
    color: #333;
    text-align: center;
    line-height: 3.75rem;
    /* background: #e5e9f2; */
  }

  /* .input_aglin {} */

  .el-span {
    float: left
  }

  .el-input {
    float: left;
  }

  .el-footer {
    position: relative;
    top: 18.75rem;

  }

  .el-main {
    height: auto;
    color: #333;
    text-align: center;

  }

  .el-row {
    margin-bottom: 20px;

    /* &:last-child {
      margin-bottom: 0;
    } */
  }

  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
